<template>
  <div class="wrap">
    <div class="progress-bar">
      <div class="progress"></div>
      <div class="inner" :style="{'--left':progress + '%'}"></div>
      <div class="runner" :style="{'--left':progress + '%'}"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    progress: {
      type: [Number,String],
      default: '0'
    }
  },
  data(){
    return{

    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  position: relative;
  height: 40px;
}
.progress-bar {
  position: absolute;
  top: 23px;
  width: 100%;
  height: 30px;
  border-radius: 18px;
  background-color: #DEEBF4;
  .inner{
    position: absolute;
    top: 0;
    z-index: 10;
    border-radius: 18px;
    height: 100%;
    background: linear-gradient(45deg, #0781FE 25%, #3496FB 0, #3496FB 50%, #0781FE 0, #0781FE 75%, #3496FB 0);
    background-size:20px 20px;
    transition: left 1s ease-in-out;
    animation: changeWidth 1s forwards linear,shrink 1s linear infinite;
  }
}
.progress {
  width: 0%;
  height: 100%;
  background-color: #00aaff;
  transition: width 1s ease-in-out;

}
.runner {
  width: 60px;
  height: 24px;
  background-size: contain;
  position: absolute;
  top: -22px;
  transition: left 1s ease-in-out;
  animation: run 1s forwards linear;
  margin-left: -55px;
}
@keyframes run {
  0% { left: 0; }
  100% { left: var(--left); }
}
@keyframes changeWidth {
  0% { width: 0; }
  100% { width: var(--left); background-position: 40px 0}
}
@keyframes shrink {
  0% { background-position: 0 0}
  100% {  background-position: 40px 0}
}
</style>
